<template>
  <div class="awareness">
    <div class="itmeBox">
      <p class="title">安全通知事件</p>
      <div class="situation" style="background: rgba(39, 215, 175, 0.1)" @click="goAwareness('1')">
        <span class="typeNum" style="color: #27d7af">{{ count ? count : '0' }}</span>
        <span class="type" style="color: #27d7af">今日通知</span>
      </div>
    </div>
    <div class="itmeBox">
      <p class="title">运行工单</p>
      <div class="typeCount">
        <div
          class="situation"
          style="background: rgba(252, 111, 94, 0.1)"
          @click="goAwareness('2')"
        >
          <span class="typeNum" style="color: #fc6f5e"> {{ TimeoutCount ? TimeoutCount : 0 }}</span>
          <!-- 填报超时+流程异常 -->
          <span class="type" style="color: #fc6f5e">超时未处理</span>
        </div>
        <div
          class="situation"
          style="background: rgba(170, 95, 255, 0.1)"
          @click="goAwareness('3')"
        >
          <span class="typeNum" style="color: #aa5fff">{{ CurrentCount ? CurrentCount : 0 }}</span>
          <span class="type" style="color: #aa5fff">当前处理</span>
        </div>
      </div>
    </div>
    <div class="itmeBox" @click="goAwareness('4')">
      <p class="title">例行性演练</p>
      <div class="situation" style="background: rgba(170, 95, 255, 0.1); cursor: pointer">
        <span class="typeNum" style="color: #aa5fff">{{ rehearsal ? rehearsal : 0 }}</span>
        <span class="type" style="color: #aa5fff">当前处理</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, watch } from 'vue';
  import { selectByFmSawoSmsSize, feelHandleEventCount } from '@/http/api/Situational';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const count = ref('');
  const TimeoutCount = ref('');
  const CurrentCount = ref('');
  const rehearsal = ref('');
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  onMounted(() => {
    SawoSmsSize();
    HandleEventCount('1');
    HandleEventCount('2');
    HandleEventCount('3');
  });
  const SawoSmsSize = () => {
    selectByFmSawoSmsSize().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      count.value = res.data.data.fmSawoSmsSize;
    });
  };
  const HandleEventCount = (data: any) => {
    feelHandleEventCount({ type: data }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      if (data == '1') {
        TimeoutCount.value = res.data.data;
      } else if (data == '2') {
        CurrentCount.value = res.data.data;
      } else {
        rehearsal.value = res.data.data;
      }
    });
  };
  const goAwareness = (type: any) => {
    router.push({
      name: 'awareness',
      params: { type: type }
    });
  };
  watch(
    () => props.changeTime,
    () => {
      SawoSmsSize();
      HandleEventCount('1');
      HandleEventCount('2');
      HandleEventCount('3');
    }
  );
</script>

<style scoped lang="less">
  .awareness {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .itmeBox {
      height: 33%;
      // padding-bottom: 20px;
      box-sizing: border-box;
      p {
        margin: 0;
        padding: 0;
        line-height: 37px;
        font-size: 16px;
        font-weight: bold;
        color: #46545d;
        margin-bottom: 5px;
      }
       .title{
          font-size: 0.072917rem;
          font-weight: bold;
          color: #46545d;
          height: 0.166667rem;
          line-height: 0.166667rem;
          margin: 0;
          padding: 0;
    }
      .situation {
        // height: 19%;
        height: calc(100% - 42px);
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        cursor: pointer;
        .typeNum {
          text-align: center;
          font-size: 18px;
          font-weight: 600;
        }
        .type {
          font-size: 12px;
          font-weight: 400;
        }
      }
      .typeCount {
        display: flex;
        height: calc(100% - 42px);
        .situation {
          // height: 19%;
          height: 100%;
          width: 30%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 8px;
          margin-right: 5px;
          cursor: pointer;
          .typeNum {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
          }
          .type {
            font-size: 12px;
            font-weight: 400;
          }
        }
      }
    }
  }
</style>
